<template>
	<div :class="[
            'cvu-modal',
            {
                'cvu-modal-show': show,
                'cvu-modal-hide': !show
            }
        ]"
    >
        <div class="cvu-modal-mask"></div>
		<div class="cvu-modal-warp">
            <div :class="['cvu-modal-header', { 'cvu-modal-header-before': title }]">
                <div class="cvu-modal-title" v-if="title">{{ title }}</div>
                <div class="cvu-modal-close" v-if="!hideClose" @click.stop="_close"><i class="iconfont iconclose"></i></div>
            </div>
            <div class="cvu-modal-content">
                <slot />
            </div>
            <div class="cvu-modal-footer" v-if="!hideFooter">
                <div class="cvu-modal-btn"
                    v-for="item in btns"
                    :key="~~item.code"
                    @click.stop="_handleBtnClick(item)"
                >{{ item.name }}</div>
            </div>
        </div>
	</div>
</template>

<script>
import common from '../../../until/common'
export default {
    name: 'cvu-modal',
    components: {},
    props: {
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 是否显示
        show: {
            type: Boolean,
            default: false
        },
        // 是否隐藏关闭icon
        hideClose: {
            type: Boolean,
            default: false
        },
        // 是否隐藏底部按钮
        hideFooter: {
            type: Boolean,
            default: false
        },
        // 按钮集合
        btns: {
            type: Array,
            default() {
                return [{
                    code: 0,
                    name: '取消'
                }, {
                    code: 1,
                    name: '确定'
                }]
            }
        }
    },
    data() {
        return {}
    },
    beforeDestroy() {
        // 处理显示drawer时滚动条穿透问题
        common.setScrollbar(document.querySelector('body'), false)
    },
    watch: {
        // 观察modal弹窗是否显示
        show: {
            handler(newVal) {
                // 处理显示时滚动条穿透问题
                newVal ? common.setScrollbar() : common.setScrollbar(document.querySelector('body'), false)
                // 显示隐藏回调
                this.$emit('on-visible', {
                    code: newVal
                })
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {
        // 以下操作为将组件添加到body节点中（实现固定宽高子组件中调用可满足全屏显示）
        this.$nextTick(() => {
            const body = document.querySelector('body')
            if (body.append) {
                body.append(this.$el)
            } else {
                body.appendChild(this.$el)
            }
        });
    },
    methods: {
        // 按钮点击
        _handleBtnClick(e) {
            this.$emit('on-click', {
                code: e.code,
                name: e.name
            })
        },
        // 关闭
        _close() {
            this.$emit('on-close')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../../style/_index.scss';
.cvu-modal{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100vw;
    height: 100vh;
    &.cvu-modal-show{
        visibility: visible;
        opacity: 1;
        transition: all .2s;
        .cvu-modal-warp{
            animation: cvu-modal-warp-show .2s ease-in-out forwards;
        }
    }
    &.cvu-modal-hide{
        visibility: hidden;
        opacity: 0;
        transition: all .2s;
        .cvu-modal-warp{
            animation: cvu-modal-warp-hide .2s ease-in forwards;
        }
    }
    .cvu-modal-mask{
        width: 100%;
        height: 100%;
        background: $mask-bg;
    }
    .cvu-modal-warp{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 450px;
        background: #ffffff;
        border-radius: 8px;
        .cvu-modal-header{
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 40px;
            padding: 20px 30px 0 30px;
            box-sizing: border-box;
            .cvu-modal-title{
                font-size: 16px;
                color: #333333;
            }
            .cvu-modal-close{
                position: absolute;
                top: 14px;
                right: 14px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                i{
                    transition: all .2s;
                    color: #999;
                    font-size: 20px;
                }
                &:hover{
                    i{
                        color: #333;
                    }
                }
            }
            &.cvu-modal-header-before::before{
                position: absolute;
                bottom: 4px;
                left: 0;
                content: '';
                width: 5px;
                height: 16px;
                background: $primary-blue;
            }
        }
        .cvu-modal-content{
            padding: 40px;
            box-sizing: border-box;
            // 实现内容为一行时居中
            &::first-line{
                text-align: center;
            }
        }
        .cvu-modal-footer{
            width: 100%;
            height: 70px;
            display: flex;
            justify-content: center;
            .cvu-modal-btn{
                min-width: 100px;
                height: 40px;
                line-height: 38px;
                text-align: center;
                margin: 0 15px;
                cursor: pointer;
                border-radius: 30px;
                transition: all .2s;
                font-size: 14px;
                color: #333;
                &:first-child{
                    background: #FFFFFF;
                    border: 1px solid rgba(100, 100, 100, .3);
                }
                &:last-child{
                    background: $primary-blue;
                    border: 1px solid $primary-blue;
                    font-weight: bold;
                    color: #FFFFFF;
                }
                &:hover{
                    &:first-of-type{
                        color: $primary-blue;
                        border: 1px solid $primary-blue;
                    }
                    &:last-of-type{
                        opacity: .7;
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
}

// 显示
@keyframes cvu-modal-warp-show{
    from{ transform: translate(-50%, -50%) scale(.8); }
    to{ transform: translate(-50%, -50%) scale(1); }
}
@-webkit-keyframes cvu-modal-warp-show{
    from{ transform: translate(-50%, -50%) scale(.8); }
    to{ transform: translate(-50%, -50%) scale(1); }
}
// 隐藏
@keyframes cvu-modal-warp-hide{
    from{ transform: translate(-50%, -50%) scale(1); }
    to{ transform: translate(-50%, -50%) scale(.8); }
}
@-webkit-keyframes cvu-modal-warp-hide{
    from{ transform: translate(-50%, -50%) scale(1); }
    to{ transform: translate(-50%, -50%) scale(.8); }
}
</style>
